<template>
    <div style="height: 100%;">
        <el-table :data="sqlInfo" border height="100%" header-cell-class-name="el-table-header-cell"
            cell-class-name="el-table-cell" class="e-page">
            <el-table-column type="index" label="序号" width="80" />
            <el-table-column prop="SQL" label="SQL" min-width="320">
                <template #default="scope">
                    <div style="cursor: pointer;color: #08c;" @click="sqlDetail(scope.row)" class="cursor-pointer">
                        {{ scope.row.SQL }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="EffectedRowCount" label="执行数" min-width="100" />
            <el-table-column prop="TotalTime" label="执行时间" min-width="120" />
            <el-table-column prop="MaxTimespan" label="最慢" min-width="100" />
            <el-table-column prop="InTransactionCount" label="事务执行" min-width="120" />
            <el-table-column prop="ErrorCount" label="错误数" min-width="100" />
            <el-table-column prop="EffectedRowCount" label="更新行数" min-width="120" />
            <el-table-column prop="FetchRowCount" label="读取行数" min-width="120" />
            <el-table-column prop="RunningCount" label="执行中" min-width="120" />
            <el-table-column prop="ConcurrentMax" label="最大并发" min-width="120" />
            <el-table-column prop="Histogram" label="执行时间分布" min-width="250">
                <template #default="scope">
                    {{ scope.row.Histogram }}
                </template>
            </el-table-column>
            <el-table-column prop="ExecuteAndResultHoldTimeHistogram" label="执行+RS时分布" min-width="250">
                <template #default="scope">
                    {{ scope.row.ExecuteAndResultHoldTimeHistogram }}
                </template>
            </el-table-column>
            <el-table-column prop="FetchRowCountHistogram" label="读取行分布" min-width="250">
                <template #default="scope">
                    {{ scope.row.FetchRowCountHistogram }}
                </template>
            </el-table-column>
            <el-table-column prop="EffectedRowCountHistogram" label="更新行分布" min-width="250">
                <template #default="scope">
                    {{ scope.row.EffectedRowCountHistogram }}
                </template>
            </el-table-column>
        </el-table>

        <el-drawer v-model="showSql" direction="ltr" :show-close="false" @open="open" :close-on-press-escape="false"
            size="80%" @close="close" append-to-body>
            <template #header>
                <div class="font-auto-resize">FULL SQL INFO</div>
            </template>
            <h3>FormatView</h3>
            <el-input v-model="detail.formattedSql" type="textarea" resize="none" :rows="5" class="font-auto-resize"
                style="padding-bottom: 5px" />

            <el-scrollbar style="height: calc(100vh - 88px - var(--font-size) * 13);width: 100%" ref="scrollRef">
                <h3>ParseView</h3>
                <el-descriptions :column="1" border>
                    <el-descriptions-item label="Tables" labelClassName="label">
                        <div class="forbid-select">{{ detail.parsedTable }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="Fields" labelClassName="label">
                        <div class="forbid-select">{{ detail.parsedFields }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="Coditions" labelClassName="label">
                        <div class="forbid-select">{{ detail.parsedConditions }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="Relationships" labelClassName="label">
                        <div class="forbid-select">{{ detail.parsedRelationships }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="OrderByColumns" labelClassName="label">
                        <div class="forbid-select">{{ detail.parsedOrderbycolumns }}</div>
                    </el-descriptions-item>
                </el-descriptions>

                <h3>LastSlowView</h3>
                <el-descriptions :column="1" border>
                    <el-descriptions-item label="MaxTimespan" labelClassName="label">
                        <div class="forbid-select">{{ detail.MaxTimespan }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="MaxTimespanOccurTime" labelClassName="label">
                        <div class="forbid-select">{{ detail.MaxTimespanOccurTime }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="LastSlowParameters" labelClassName="label">
                        <div class="forbid-select">{{ detail.LastSlowParameters }}</div>
                    </el-descriptions-item>
                </el-descriptions>

                <h3>LastErrorView</h3>
                <el-descriptions :column="1" border>
                    <el-descriptions-item label="LastErrorMessage" labelClassName="label">
                        <div class="forbid-select">{{ detail.LastErrorMessage }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="LastErrorClass" labelClassName="label">
                        <div class="forbid-select">{{ detail.LastErrorClass }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="LastErrorTime" labelClassName="label">
                        <div class="forbid-select">{{ detail.LastErrorTime }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="LastErrorStackTrace" labelClassName="label">
                        <div class="forbid-select">{{ detail.LastErrorStackTrace }}</div>
                    </el-descriptions-item>
                </el-descriptions>

                <h3>OtherView</h3>
                <el-descriptions :column="1" border>
                    <el-descriptions-item label="BatchSizeMax" labelClassName="label">
                        <div class="forbid-select">{{ detail.BatchSizeMax }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="BatchSizeTotal" labelClassName="label">
                        <div class="forbid-select">{{ detail.BatchSizeTotal }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="BlobOpenCount" labelClassName="label">
                        <div class="forbid-select">{{ detail.BlobOpenCount }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="ClobOpenCount" labelClassName="label">
                        <div class="forbid-select">{{ detail.ClobOpenCount }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="ReaderOpenCount" labelClassName="label">
                        <div class="forbid-select">{{ detail.ReaderOpenCount }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="InputStreamOpenCount" labelClassName="label">
                        <div class="forbid-select">{{ detail.InputStreamOpenCount }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="ReadStringLength" labelClassName="label">
                        <div class="forbid-select">{{ detail.ReadStringLength }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="ReadBytesLength" labelClassName="label">
                        <div class="forbid-select">{{ detail.ReadBytesLength }}</div>
                    </el-descriptions-item>
                </el-descriptions>
            </el-scrollbar>
        </el-drawer>
    </div>

</template>
<script setup>
import { useModalSize, useRequest, useUnMounted } from "@usehook"

let sqlInfo = $ref([])
let showSql = $ref(false)
let detail = $ref({})
let interval = $ref(null)

const getData = () => {
    useRequest({
        url: "/dataSource/druid/sql.json?orderBy=SQL&orderType=desc&page=1&perPageCount=1000000"
    }).then(resp => {
        if (resp && resp.ResultCode === 1) {
            nextTick(() => {
                sqlInfo = resp.Content
            })
        }
    })
}

const sqlDetail = (row) => {
    useRequest({ url: "/dataSource/druid/sql-" + row.ID + ".json" }).then(resp => {
        if (resp && resp.ResultCode === 1) {
            detail = resp.Content
        }
    }).finally(() => {
        showSql = true
    })
}

const close = () => {
    useModalSize(false)
}

const scrollRef = $ref(null)

const open = () => {
    useModalSize()
    if (scrollRef) setTimeout(() => {
        scrollRef.wrapRef.scrollTop = 0
    }, 100)
}

const clear = () => {
    if (interval) clearInterval(interval)
    interval = null
}

onActivated(() => {
    getData()
    clear()
    interval = setInterval(() => {
        getData()
    }, 10000)
})

useUnMounted(() => {
    clear()
})
</script>
<style scoped>
:deep(.label) {
    width: 250px;
}

:deep(.el-descriptions-row th) {
    text-align: right !important;
}

:deep(.el-drawer__body) {
    padding: 0 10px !important;
}

:deep(h3) {
    margin: 10px 0;
    font-size: calc(var(--font-size) * 1.2);
}

:deep(.el-drawer__header) {
    margin-bottom: 20px;
}

:deep(.el-textarea__inner) {
    height: calc(var(--font-size) * 10);
}
</style>